import 'package:chengyu/global.dart';
import 'package:chengyu/http/api.dart';
import 'package:chengyu/interval.dart';
import 'package:flutter/material.dart';

class DetailPage extends StatefulWidget {
  DetailPage({Key key, this.id}) : super(key: key);
  final String id;

  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  var _data;
  @override
  void initState() {
    String _id = widget.id;
    getChengyuDetailInfo(_id).then((res) {
      setState(() {
        _data = res['maincontent'];
      });
    });
    super.initState();
  }

  List<Widget> renderInfo(dd) {
    List<Widget> items = [];
    for (var i = 0; i < dd.length; i++) {
      items.add(SizedBox(height: 10));
      items.add(
        Text(
          dd[i],
          style: TextStyle(
            color: Global.fontColor,
            fontSize: 14,
            fontWeight: FontWeight.w400,
          ),
        ),
      );
    }
    return items;
  }

  List<Widget> renderList(a) {
    List<Widget> items = [];
    for (var i = 0; i < a.length; i++) {
      var item = a[i];
      items.add(SizedBox(height: 10));
      items.add(InkWell(
        child: Container(
          width: MediaQuery.of(context).size.width,
          padding: EdgeInsets.fromLTRB(1, 7, 1, 7),
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                color: Global.fontSecondColor.withOpacity(0.1),
                width: 0.5,
              ),
            ),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                item['name'],
                style: TextStyle(
                  color: Global.fontColor,
                  fontSize: 14,
                  fontWeight: FontWeight.w400,
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    '查看详情',
                    style: TextStyle(
                      color: Global.fontSecondColor.withOpacity(0.7),
                      fontSize: 12,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                  Icon(
                    Icons.chevron_right,
                    color: Global.fontSecondColor,
                    size: 13,
                  )
                ],
              ),
            ],
          ),
        ),
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DetailPage(id: item['id']),
            ),
          );
        },
      ));
    }
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return _data == null
        ? Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Global.backgroundColor,
              child: Center(child: CircularProgressIndicator()),
            ),
          )
        : Scaffold(
            appBar: AppBar(
              title: Text('${_data[0]['title']}的成语解释',
                  style: TextStyle(fontSize: 16)),
              elevation: 0,
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.home),
                  tooltip: '首页',
                  onPressed: () {
                    Navigator.of(context).popUntil(ModalRoute.withName("/"));
                  },
                )
              ],
            ),
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      width: MediaQuery.of(context).size.width,
                      margin: EdgeInsets.all(10),
                      padding: EdgeInsets.all(10),
                      decoration: BoxDecoration(
                        color: Global.primaryColor.withOpacity(0.1),
                        border: Border.all(
                          color: Global.primaryColor.withOpacity(0.5),
                          width: 0.5,
                        ),
                        borderRadius: BorderRadius.circular(5),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            _data[0]['title'],
                            style: TextStyle(
                              color: Global.primaryColor,
                              fontSize: 32,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: renderInfo(_data[0]['dd']),
                          ),
                          IntervalLine(),
                          Text(
                            _data[1]['title'],
                            style: TextStyle(
                              color: Global.primaryColor,
                              fontSize: 18,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          SizedBox(height: 5),
                          Column(
                            children: renderList(_data[1]['a']),
                          ),
                          IntervalLine(),
                          Text(
                            _data[2]['title'],
                            style: TextStyle(
                              color: Global.primaryColor,
                              fontSize: 18,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          SizedBox(height: 5),
                          Column(
                            children: renderList(_data[2]['a']),
                          ),
                          IntervalLine(),
                          Text(
                            _data[3]['title'],
                            style: TextStyle(
                              color: Global.primaryColor,
                              fontSize: 18,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          SizedBox(height: 5),
                          Column(
                            children: renderList(_data[3]['a']),
                          ),
                          IntervalLine(),
                          Text(
                            _data[4]['title'],
                            style: TextStyle(
                              color: Global.primaryColor,
                              fontSize: 18,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          SizedBox(height: 5),
                          Column(
                            children: renderList(_data[4]['a']),
                          ),
                          IntervalLine(),
                          Text(
                            _data[5]['title'],
                            style: TextStyle(
                              color: Global.primaryColor,
                              fontSize: 18,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          SizedBox(height: 5),
                          Column(
                            children: renderList(_data[5]['a']),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: 35),
                  ],
                ),
              ),
            ),
          );
  }
}
